<template>
    <div class="login">
        <div class="login-con">
            <!-- 顶部切换 -->
            <ul class="menu-tab">
                <li v-for="item in menuData" :key="item.id" :class="{ current: item.current }" @click="clickMenu(item)">
                    {{ item.txt }}
                </li>
            </ul>
            <!-- 表单部分 -->
            <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
                <!-- 修改提示文字 并且修改type类型 与v-model绑定的数据 并且添加类名-->
                <el-form-item prop="username" class="item-from">
                    <label for="username">邮箱</label>
                    <el-input v-model="ruleForm.username" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item prop="password" class="item-from">
                    <label for="password">密码</label>
                    <el-input id="password" type="password" v-model="ruleForm.password" autocomplete="off" minlength="6"
                        maxlength="20"></el-input>
                </el-form-item>

                <el-form-item prop="passwords" class="item-from" v-show="model === 'register'">
                    <label>重复密码</label>
                    <el-input type="password" v-model="ruleForm.passwords" autocomplete="off" minlength="6"
                        maxlength="20"></el-input>
                </el-form-item>
                <!-- 设置按钮 -->
                <el-form-item>
                    <el-button @click="submitForm(ruleFormRef)" type="danger" class="login-btn block" :disabled = "btnbool">{{ model === 'login' ?
                        "登录" : "注册" }}</el-button>
                </el-form-item>
            </el-form>
            <!-- 表单部分 -->
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import type { FormInstance} from "element-plus";
import { ElMessage } from 'element-plus'

import { useRouter } from "vue-router"
// 引用api封装
import link from '../util/api'
import { objectExpression } from "@babel/types";
// 引用加密
import useMd5 from '../../hooks/useMd5.js'
import router from "@/router";
// 用于验证工具库
// import * as verification from "../util/verification.ts"

const ruleFormRef = ref<FormInstance>()
const checkAge = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error('Please input the age'))
    }

    setTimeout(() => {
        if (!Number.isInteger(value)) {
            callback(new Error("Age must be greater than 18"))
        } else {
            callback()
        }
    }, 1000)
};
let router=useRouter()
// 输入框中绑定的变量
const ruleForm = reactive({
    username: "",
    password: "",
    passwords: "",
});

// 开发环境
onMounted(() => {
    console.log(process.env.VUE_APP_XIAOMING);
})

// 创建一个变量用来控制按钮是否能点击
let btnbool = ref(true)
// 用wath监听数据输入框是否有值
watch(ruleForm,(newval:any)=>{
    console.log(newval);
    if(model.value = 'login'){
        if(newval.username!='' && newval.password!='' ){
            btnbool.value = false
        }else{
            btnbool.value = true
        }
    }
})



// 修改密码对应的触发函数
const validatePass = (rule: any, value: any, callback: any) => {
    let reg = /^(?!\D+$)(?![^a-zA-Z]+$)\s{6,15}$/;//验证密码

    if (value === "") {
        callback(new Error("密码不能为空"));
    } else if (!reg.test(value)) {
        callback(new Error('密码格式有误！6至15位的字母+数字'))
    } else {
        callback()
    }
};
// 重复密码对应的重复函数
const validatePass2 = (rule: any, value: any, callback: any) => {
    // 因为登录页面没有重复密码这个输入框所有 在登录的时候跳过这个输入框
    if (model.value === 'login') { callback() }
    if (value === "") {
        callback(new Error("重复密码不能为空"));
    } else if (value !== ruleForm.password) {
        callback(new Error("两次密码必须相同"));
    } else {
        callback();
    }

};

// 设置以何种方式触发，表单验证 默认是blur失去焦点验证
// 触发了blur事件后就会调用前面的 函数进行表单验证
const rules = reactive({
    password: [{ validator: validatePass, trigger: "blur" }],
    passwords: [{ validator: validatePass2, trigger: "blur" }],
    age: [{ validator: checkAge, trigger: "blur" }],
});
// 修改对应触发函数
const checkUser = (rule: any, value: any, callback: any) => {
    // 创建邮箱正则
    let reg = /^([a-zA-Z] | [0-9])(\w | \-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/

    if (!value) {
        return callback(new Error('邮箱不能为空'));
        // verification()
    } else if (!reg.test(value)) {
        return callback(new Error("邮箱格式有误！！"))
    } else {
        callback()
    }
}

// // 按钮的回调函数
// const submitForm = (formEl: FormInstance | undefined) => {
//     if (!formEl) return;
//     formEl.validate((valid) => {
//         if (valid) {
//             console.log("submit!");
//             link('http://localhost:8877/one').then((ok) => {
//                 console.log(ok);
//             })
//         } else {
//             console.log("error submit!");
//             return false;
//         }
//     });
// };

// 把输入框的数据发送给后台
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            // 判断是登录还是注册
            if (model.value == 'login') {
                console.log('登录');
                // 登录请求发送
                link(`/registeruname=${ruleForm.username}&pwd=${ruleForm.password}`,"get").then(ok=>{
                    let { data } = ok
                    // 判断data长度不为0登录成功
                    if(data.length!=0){
                        console.log('登录成功');
                        // 编程式导航  登录成功就跳转到首页
                        router.push('/home')
                    }else{
                        console.log('登录失败');
                    }
                })
            } else {
                // 把要发送的数据拼装成一个对象
                let data = {
                    uname: ruleForm.username,
                    pwd: ruleForm.password
                };
                // link('/register','POST',data).then((ok)=>{
                //     console.log(ok);
                // });

                // 判断注册是否成功   注册成功跳转到登录页
                link('/register', 'POST', data).then((ok) => {
                    ElMessage.error("注册失败")
                    // 判断数据是否为空，不为空表示注册成功
                    let { data } = ok
                    // 转成数组判断长度即可知道对象是否为空
                    if (Object.keys(data).length! == 0) {
                        console.log('注册成功');
                        // 把输入框的内容切换到登录
                        model.value = 'login'
                        // 把上面的切换按钮变成登录
                        // 先把所有的控制切换的变量编程false
                        menuData.forEach((elem)=>{
                            elem.current = false
                        });
                        // 在把登录的编程true
                        menuData[0].current = true
                    } else {
                        ElMessage.error("注册失败")
                    }
                })

            }
        } else {
            console.log('error submit!');
            return false
        }
    });
};


// // 判断注册是否成功
// link('/register','POST',data).then((ok)=>{
//     // 判断数据是否为空，不为空表示注册成功
//     let { data } = ok
//     // 转成数组判断长度即可知道对象是否为空
//     if(objectExpression.keys(data).length! == 0){
//         console.log('注册成功');
//     }else{
//         console.log('注册失败！');
//     }
// })


// 设置顶部切换为登录页面
link("/register",'POST',data).then((ok)=>{

})


const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
};

const menuData = reactive([
    {
        txt: '登录',
        current: true,
        type: 'login'
    },
    {
        tex: '注册',
        current: false,
        type: "register"
    }
])
const model = ref('login')
const clickMenu = (data: any) => {
    menuData.forEach((elem) => {
        elem.current = false;
    })
    data.current = true;
    model.value = data.type
}


</script>

<style scoped></style>
<style lang="scss">
.login {
    background-color: #000066; //深蓝色
    height: 100%;
}

html,
body,
#app {
    //设置页面100%高
    height: 100%;
}

// 设置切换样式开始
.login-wrap {
    width: 330px;
    margin: auto;
}

.menu-tab {
    text-align: center;

    li {
        display: inline-block;
        width: 88px;
        line-height: 36px;
        font-size: 14px;
        color: #fff;
        border-radius: 2px;
        cursor: pointer;
    }

    .current {
        background-color: rgba(255, 255, 255, 0.5); //白色半透明
    }
}

// 设置切换样式结束

// 表单样式
.demo-ruleForm {
    width: 30%;
    margin: 50px auto;

    label {
        display: block;
        margin-bottom: 3px;
        font-size: 14px;
        color: #fff;
    }

    .item-from {
        margin-bottom: 13px;
    }

    .block {
        display: block;
        width: 100%;
    }

    .login-btn {
        margin-top: 19px;
    }
}

// 表单样式</style>